import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "qrc:/qml/styles" as Styles

Rectangle {
    id: kpiCard

    // 自定义属性
    property string title: ""
    property string value: "0"
    property string unit: ""
    property string subtitle: ""
    property color accentColor: Styles.Theme.primary  // 用于边框和图标的强调色
    property string iconSource: ""
    property string trend: "none"      // up, down, none
    property real trendValue: 0        // 趋势变化值
    property bool loading: false
    property bool enableValueAnimation: true

    // 默认尺寸
    width: Styles.Theme.kpiCardWidth
    height: Styles.Theme.kpiCardHeight

    // 卡片样式 - 统一背景，仅用强调色点缀
    color: Styles.Theme.surface
    border.color: accentColor  // 使用强调色作为边框
    border.width: 2  // 稍微加粗边框以突出状态
    radius: Styles.Theme.radiusNormal

    // 悬停效果
    Rectangle {
        anchors.fill: parent
        radius: parent.radius
        color: "white"
        opacity: mouseArea.containsMouse ? 0.05 : 0
        Behavior on opacity { NumberAnimation { duration: Styles.Theme.animationFast } }
    }

    // 阴影效果（简化版）
    Rectangle {
        anchors.fill: parent
        anchors.topMargin: 2
        anchors.leftMargin: 2
        radius: parent.radius
        color: "black"
        opacity: 0.1
        z: -1
    }

    // 主要内容
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: Styles.Theme.spacingNormal
        spacing: Styles.Theme.spacingSmall

        // 标题行
        RowLayout {
            Layout.fillWidth: true
            spacing: Styles.Theme.spacingSmall

            // 图标 - 使用强调色
            Text {
                visible: iconSource !== ""
                text: iconSource
                color: accentColor
                font.pixelSize: 16
                Layout.alignment: Qt.AlignVCenter
            }

            // 标题
            Text {
                text: title
                color: Styles.Theme.textSecondary
                font.pixelSize: Styles.Theme.fontSizeSmall
                font.weight: Styles.Theme.fontWeightMedium
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignVCenter
            }

            // 趋势指示器
            Row {
                visible: trend !== "none" && !loading
                spacing: 2
                Layout.alignment: Qt.AlignVCenter

                Text {
                    text: trend === "up" ? "▲" : "▼"
                    color: trend === "up" ? Styles.Theme.success : Styles.Theme.danger
                    font.pixelSize: 10
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: Math.abs(trendValue).toFixed(1)
                    color: trend === "up" ? Styles.Theme.success : Styles.Theme.danger
                    font.pixelSize: 10
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }

        Item { Layout.fillHeight: true } // 弹性空间

        // 数值显示区域
        RowLayout {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignCenter

            // 主要数值 - 使用强调色突出关键指标
            Text {
                visible: !loading
                text: value
                color: accentColor
                font.pixelSize: Styles.Theme.fontSizeXLarge
                font.weight: Styles.Theme.fontWeightBold
                Layout.alignment: Qt.AlignBaseline
            }

            // 单位
            Text {
                visible: unit !== "" && !loading
                text: unit
                color: Styles.Theme.textTertiary
                font.pixelSize: Styles.Theme.fontSizeNormal
                Layout.alignment: Qt.AlignBaseline
                Layout.leftMargin: Styles.Theme.spacingXSmall
            }

            // 加载指示器
            Rectangle {
                visible: loading
                width: 40
                height: 40
                radius: 20
                color: "transparent"
                border.width: 3
                border.color: Styles.Theme.surfaceVariant
                Layout.alignment: Qt.AlignCenter

                Rectangle {
                    width: 8
                    height: 8
                    radius: 4
                    color: Styles.Theme.primary
                    anchors.centerIn: parent

                    RotationAnimation on rotation {
                        running: loading
                        loops: Animation.Infinite
                        from: 0
                        to: 360
                        duration: 1200
                    }
                }
            }
        }

        Item { Layout.fillHeight: true } // 弹性空间

        // 副标题
        Text {
            visible: subtitle !== "" && !loading
            text: subtitle
            color: Styles.Theme.textTertiary
            font.pixelSize: Styles.Theme.fontSizeSmall
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignBottom
        }
    }

    // 鼠标交互
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor

        onClicked: kpiCard.clicked()
    }

    // 信号
    signal clicked()

    // 数值变化动画
    SequentialAnimation {
        id: valueChangeAnimation

        PropertyAnimation {
            target: kpiCard
            property: "scale"
            from: 1.0
            to: 1.05
            duration: 150
            easing.type: Easing.OutCubic
        }

        PropertyAnimation {
            target: kpiCard
            property: "scale"
            from: 1.05
            to: 1.0
            duration: 150
            easing.type: Easing.InCubic
        }
    }

    // 监听数值变化，触发动画
    onValueChanged: {
        if (!loading && enableValueAnimation) {
            valueChangeAnimation.start()
        }
    }

    // 加载状态变化动画
    Behavior on opacity {
        NumberAnimation { duration: Styles.Theme.animationNormal }
    }

    opacity: loading ? 0.7 : 1.0
}
